<div class="f-page f-page-navigate f-page-is-grid-mainsubcard">
    <app-header></app-header>
    <section class="f-page-main">
        <farris-splitter class="f-page-content">
            <farris-splitter-pane class="f-col-w4 f-page-content-nav" [ngResizable]="true" [enableCollapse]="true" [rzHandles]="'e'">
                <div class="f-struct-wrapper f-utils-fill-flex-column">
                    <!-- 这里用来写筛选部分 -->
                    <div class="f-page-content-nav-extend">
                        <farris-list-filter [filterList]="filterList" [alLeft]="true" [autoLabel]="true" [liveSearch]="true">
                        </farris-list-filter>
                    </div>

                    <farris-section [enableMaximize]="false" class="f-section-grid f-section-in-nav" [showHeader]="false">
                        <farris-datagrid
                            class="f-component-grid"
                            [columns]="mainGridColumns"
                            [data]="mainGridData"
                            [idField]="'DDBH'"
                            [showLineNumber]="true"
                            [fitColumns]="false"
                            [total]="mainGridTotal"
                            [striped]="true"
                            [showCheckbox]="false"
                            [virtualized]="true"
                            [pagination]="false"
                            [fit]="true"
                        >
                        </farris-datagrid>
                    </farris-section>
                </div>
            </farris-splitter-pane>
            <section class="f-page-content-main">
                <div class="f-struct-wrapper">
                    <farris-section class="f-section-form f-section-in-main" [enableAccordion]="'default'" [mainTitle]="'详细信息'">
                        <div class="f-form-layout farris-form farris-form-controls-inline" *ngIf="mainCardData">
                            <div class="col-12 col-md-6">
                                <div class="farris-group-wrap">
                                    <div class="form-group farris-form-group">
                                        <label class="col-form-label">
                                            <span class="farris-label-info text-danger">*</span
                                            ><span class="farris-label-text">单据编号</span>
                                        </label>
                                        <div class="farris-input-wrap">
                                            <input
                                                type="text"
                                                class="form-control form-control-invalid"
                                                name="DJBH"
                                                [(ngModel)]="mainCardData.FKDD.data.DJBH"
                                            />
                                            <div class="farris-feedback f-state-invalid">
                                                <span
                                                    class="f-icon f-icon-message_warning f-feedback-icon"
                                                    (click)="showErrorMessage = true"
                                                    *ngIf="!showErrorMessage"
                                                ></span>
                                                <span class="f-feedback-message" *ngIf="showErrorMessage" (click)="showErrorMessage = false"
                                                    >请输入有效格式</span
                                                >
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="farris-group-wrap">
                                    <div class="form-group farris-form-group">
                                        <label class="col-form-label">
                                            <span class="farris-label-text">业务类型</span>
                                        </label>
                                        <div class="farris-input-wrap">
                                            <farris-combo-list
                                                [(ngModel)]="valObj.id"
                                                [(selectedValues)]="valObj.text"
                                                [idField]="'id'"
                                                [textField]="'text'"
                                                [data]="listItemsDropDown"
                                            ></farris-combo-list>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <fieldset class="f-section-formgroup">
                                <div class="f-section-formgroup-inputs">
                                    <div class="col-12 col-md-6">
                                        <div class="farris-group-wrap">
                                            <div class="form-group farris-form-group">
                                                <label class="col-form-label">
                                                    <span class="farris-label-text">业务日期</span>
                                                </label>
                                                <div class="farris-input-wrap">
                                                    <farris-datepicker class="form-control"></farris-datepicker>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="farris-group-wrap">
                                            <div class="form-group farris-form-group">
                                                <label class="col-form-label">
                                                    <span class="farris-label-info text-danger">*</span
                                                    ><span class="farris-label-text">客户</span>
                                                </label>
                                                <div class="farris-input-wrap">
                                                    <input
                                                        type="text"
                                                        class="form-control"
                                                        [(ngModel)]="mainCardData.FKDD.data.KH"
                                                        name="kh"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="farris-group-wrap">
                                            <div class="form-group farris-form-group">
                                                <label class="col-form-label">
                                                    <span class="farris-label-text">客户别名</span>
                                                </label>
                                                <div class="farris-input-wrap">
                                                    <input
                                                        type="text"
                                                        class="form-control"
                                                        [(ngModel)]="mainCardData.FKDD.data.KHBM"
                                                        name="khbm"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="farris-group-wrap">
                                            <div class="form-group farris-form-group">
                                                <label class="col-form-label">
                                                    <span class="farris-label-text">客户采购单号</span>
                                                </label>
                                                <div class="farris-input-wrap">
                                                    <input
                                                        type="text"
                                                        class="form-control"
                                                        [(ngModel)]="mainCardData.FKDD.data.KHCGDH"
                                                        name="khcgdh"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="farris-group-wrap">
                                            <div class="form-group farris-form-group">
                                                <label for="hpinput01" class="col-form-label">
                                                    <span class="farris-label-info text-danger">*</span
                                                    ><span class="farris-label-text">业务员</span>
                                                </label>
                                                <div class="farris-input-wrap">
                                                    <farris-lookup-grid
                                                        name="lxdh"
                                                        [(ngModel)]="lookupEmpee"
                                                        [uri]="'assets/data/empoyee.json'"
                                                        [singleSelect]="true"
                                                        [idField]="'Code'"
                                                        [pageSize]="20"
                                                        [pageIndex]="1"
                                                        [pagination]="true"
                                                        [textField]="'Name'"
                                                        [valueField]="'Code'"
                                                        [disabled]="isViewState"
                                                        [ngClass]="{ 'f-state-disabled': isViewState }"
                                                    ></farris-lookup-grid>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="farris-group-wrap">
                                            <div class="form-group farris-form-group">
                                                <label class="col-form-label">
                                                    <span class="farris-label-info text-danger">*</span
                                                    ><span class="farris-label-text">客户</span>
                                                </label>
                                                <div class="farris-input-wrap">
                                                    <input
                                                        type="text"
                                                        class="form-control"
                                                        [(ngModel)]="mainCardData.FKDD.data.KH"
                                                        name="kh"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="farris-group-wrap">
                                            <div class="form-group farris-form-group">
                                                <label class="col-form-label">
                                                    <span class="farris-label-text">客户别名</span>
                                                </label>
                                                <div class="farris-input-wrap">
                                                    <input
                                                        type="text"
                                                        class="form-control"
                                                        [(ngModel)]="mainCardData.FKDD.data.KHBM"
                                                        name="khbm"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="farris-group-wrap">
                                            <div class="form-group farris-form-group">
                                                <label class="col-form-label">
                                                    <span class="farris-label-text">客户采购单号</span>
                                                </label>
                                                <div class="farris-input-wrap">
                                                    <input
                                                        type="text"
                                                        class="form-control"
                                                        [(ngModel)]="mainCardData.FKDD.data.KHCGDH"
                                                        name="khcgdh"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="farris-group-wrap">
                                            <div class="form-group farris-form-group">
                                                <label for="hpinput01" class="col-form-label">
                                                    <span class="farris-label-info text-danger">*</span
                                                    ><span class="farris-label-text">业务员</span>
                                                </label>
                                                <div class="farris-input-wrap">
                                                    <farris-lookup-grid
                                                        name="lxdh"
                                                        [(ngModel)]="lookupEmpee"
                                                        [uri]="'assets/data/empoyee.json'"
                                                        [singleSelect]="true"
                                                        [idField]="'Code'"
                                                        [pageSize]="20"
                                                        [pageIndex]="1"
                                                        [pagination]="true"
                                                        [textField]="'Name'"
                                                        [valueField]="'Code'"
                                                        [disabled]="isViewState"
                                                        [ngClass]="{ 'f-state-disabled': isViewState }"
                                                    ></farris-lookup-grid>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </farris-section>
                </div>
                <div class="f-struct-wrapper">
                    <farris-section class="f-section-tabs f-section-in-main" [showHeader]="false">
                        <farris-tabs class="f-component-tabs f-tabs-has-grid" [btnStates]="firstBtnStates">
                            <farris-tab [title]="'物料信息'" [id]="'wlxx'" [toolbar]="subGridToolbarA">
                                <ng-template #content>
                                    <div class="f-struct-is-subgrid">
                                        <div class="f-grid-is-sub f-utils-flex-column">
                                            <farris-datagrid
                                                class="f-component-grid f-utils-fill"
                                                [columns]="subGridColumnA"
                                                [data]="subGridDataA"
                                                [idField]="'DDBH'"
                                                [showLineNumber]="true"
                                                [fitColumns]="false"
                                                [total]="subGridDataTotalA"
                                                [striped]="true"
                                                [showCheckbox]="false"
                                                [virtualized]="true"
                                                [pagination]="false"
                                                [fit]="true"
                                            >
                                            </farris-datagrid>
                                        </div>
                                    </div>
                                </ng-template>
                            </farris-tab>
                            <farris-tab [title]="'交货信息'" [id]="'jhxx'" [toolbar]="subGridToolbarB">
                                <ng-template #content>
                                    <div class="f-struct-is-subgrid">
                                        <div class="f-grid-is-sub f-utils-flex-column">
                                            <farris-datagrid
                                                class="f-component-grid f-utils-fill"
                                                [columns]="subGridColumnB"
                                                [data]="subGridDataB"
                                                [idField]="'DDBH'"
                                                [showLineNumber]="true"
                                                [fitColumns]="false"
                                                [total]="subGridDataTotalB"
                                                [striped]="true"
                                                [showCheckbox]="false"
                                                [virtualized]="true"
                                                [pagination]="false"
                                                [fit]="true"
                                            >
                                            </farris-datagrid>
                                        </div>
                                    </div>
                                </ng-template>
                            </farris-tab>
                        </farris-tabs>
                    </farris-section>
                </div>
            </section>
        </farris-splitter>
    </section>
</div>
